<template>
	<div class="app-container">
		<!-- 顶部导航栏 -->
		<header class="header">
			<div class="logo">
				<svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				校园运动会管理系统
			</div>
			<div class="flex-grow"></div>
			<div class="flex items-center gap-6">
				<div class="flex items-center gap-2">
					<img id="img-head" src="img/jstu1.webp" alt="用户头像">
					<span class="text-white text-sm">{{ currentUser?.realName || '管理员' }}</span>
				</div>
				<div class="flex items-center gap-2">
					<a href="javascript:void(0)" class="denglu" @click="handleLogout">
						<svg class="logout-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<polyline points="16 17 21 12 16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						退出登录
					</a>
				</div>
			</div>
		</header>

		<!-- 左侧导航栏 -->
		<nav class="sidebar">
			<div class="menu-item" :class="{ active: $route.path === '/admin' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<rect x="3" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="14" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="14" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="3" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
				</svg>
				<a @click="$router.push('/admin')">系统管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/users' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
					<circle cx="9" cy="7" r="4"></circle>
					<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
					<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
				</svg>
				<a @click="$router.push('/admin/users')">用户管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/operation-logs' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M3 3v5h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M12 7v5l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/operation-logs')">操作日志</a>
			</div>
			<div class="menu-item active">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="12" cy="12" r="10"></circle>
					<line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				异常处理
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/system-config' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="12" cy="12" r="3"></circle>
					<path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.54l4.24 4.24M1.54 14.46l4.24-4.24M18.46 14.46l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/system-config')">系统配置</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/backup' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/backup')">数据备份</a>
			</div>
		</nav>

		<!-- 主要内容 -->
		<main class="content">
			<div class="main-content-header">
				<h1 class="text-2xl font-medium">异常处理管理</h1>
				<div class="header-actions">
					<el-button type="success" size="small" @click="handleExport">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						导出异常
					</el-button>
					<el-button type="warning" size="small" @click="handleCleanExceptions">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						清理异常
					</el-button>
					<el-button type="primary" size="small" @click="handleStatistics">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<line x1="18" y1="20" x2="18" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="12" y1="20" x2="12" y2="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="6" y1="20" x2="6" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						统计分析
					</el-button>
				</div>
			</div>

			<!-- 统计信息卡片 -->
			<div class="statistics-cards">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon danger">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="12" y1="17" x2="12.01" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.totalExceptions || 0 }}</div>
									<div class="stat-label">总异常数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon warning">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="12" cy="12" r="10"></circle>
										<polyline points="12 6 12 12 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.unhandledExceptions || 0 }}</div>
									<div class="stat-label">未处理异常</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon success">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<polyline points="22 4 12 14.01 9 11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.handledExceptions || 0 }}</div>
									<div class="stat-label">已处理异常</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon info">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="12" cy="12" r="10"></circle>
										<line x1="12" y1="16" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="12" y1="8" x2="12.01" y2="8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.todayExceptions || 0 }}</div>
									<div class="stat-label">今日异常</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>

			<!-- 搜索区域 -->
			<div class="search-bar">
				<el-form :inline="true" :model="searchForm" size="small">
					<el-form-item label="异常类型">
						<el-select v-model="searchForm.exceptionType" placeholder="请选择异常类型" clearable style="width: 150px">
							<el-option v-for="type in exceptionTypes" :key="type.value" :label="type.label" :value="type.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="异常级别">
						<el-select v-model="searchForm.exceptionLevel" placeholder="请选择异常级别" clearable style="width: 120px">
							<el-option label="低" value="LOW"></el-option>
							<el-option label="中" value="MEDIUM"></el-option>
							<el-option label="高" value="HIGH"></el-option>
							<el-option label="严重" value="CRITICAL"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="处理状态">
						<el-select v-model="searchForm.handleStatus" placeholder="请选择状态" clearable style="width: 120px">
							<el-option label="未处理" value="UNHANDLED"></el-option>
							<el-option label="处理中" value="HANDLING"></el-option>
							<el-option label="已处理" value="HANDLED"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模块名称">
						<el-input v-model="searchForm.moduleName" placeholder="请输入模块名称" clearable style="width: 150px"></el-input>
					</el-form-item>
					<el-form-item label="关键词">
						<el-input v-model="searchForm.keyword" placeholder="请输入关键词" clearable style="width: 150px"></el-input>
					</el-form-item>
					<el-form-item label="时间范围">
						<el-date-picker
							v-model="searchForm.timeRange"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							style="width: 350px"
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSearch" :loading="loading">
							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<circle cx="11" cy="11" r="8"></circle>
								<path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
							搜索
						</el-button>
						<el-button @click="handleReset">
							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<polyline points="23 4 23 10 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
							重置
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- 异常记录表格 -->
			<div class="table-container">
				<el-table
					:data="tableData"
					v-loading="loading"
					stripe
					border
					style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column prop="id" label="异常ID" width="80" align="center"></el-table-column>
					<el-table-column prop="exceptionType" label="异常类型" width="120" align="center">
						<template #default="scope">
							<el-tag :type="getExceptionTypeTagType(scope.row.exceptionType)" size="small">
								{{ getExceptionTypeLabel(scope.row.exceptionType) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="exceptionLevel" label="异常级别" width="100" align="center">
						<template #default="scope">
							<el-tag :type="getExceptionLevelTagType(scope.row.exceptionLevel)" size="small">
								{{ getExceptionLevelLabel(scope.row.exceptionLevel) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="exceptionMessage" label="异常信息" min-width="200" show-overflow-tooltip></el-table-column>
					<el-table-column prop="moduleName" label="模块名称" width="120" align="center"></el-table-column>
					<el-table-column prop="methodName" label="方法名称" width="150" align="center"></el-table-column>
					<el-table-column prop="handleStatus" label="处理状态" width="100" align="center">
						<template #default="scope">
							<el-tag :type="getHandleStatusTagType(scope.row.handleStatus)" size="small">
								{{ getHandleStatusLabel(scope.row.handleStatus) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="handledBy" label="处理人" width="100" align="center"></el-table-column>
					<el-table-column prop="createdAt" label="发生时间" width="180" align="center">
						<template #default="scope">
							{{ formatDateTime(scope.row.createdAt) }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="center" fixed="right">
						<template #default="scope">
							<el-button-group size="mini">
								<el-button type="primary" @click="handleViewDetail(scope.row)">
									<svg class="btn-icon-small" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
									</svg>
									详情
								</el-button>
								<el-button
									v-if="scope.row.handleStatus === 'UNHANDLED'"
									type="success"
									@click="handleMarkAsHandled(scope.row)">
									<svg class="btn-icon-small" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<polyline points="20 6 9 17 4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
									处理
								</el-button>
								<el-button
									v-if="scope.row.handleStatus === 'HANDLED'"
									type="warning"
									@click="handleMarkAsUnhandled(scope.row)">
									<svg class="btn-icon-small" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<polyline points="1 4 1 10 7 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
									撤销
								</el-button>
								<el-button type="danger" @click="handleDelete(scope.row)">
									<svg class="btn-icon-small" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
									删除
								</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页控制 -->
				<div class="pagination-container">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagination.currentPage"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pagination.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pagination.total">
					</el-pagination>
				</div>

				<!-- 批量操作 -->
				<div class="batch-operations" v-if="selectedExceptions.length > 0">
					<span>已选择 {{ selectedExceptions.length }} 项</span>
					<el-button type="success" size="small" @click="handleBatchHandle">批量处理</el-button>
					<el-button type="danger" size="small" @click="handleBatchDelete">批量删除</el-button>
					<el-button type="info" size="small" @click="handleBatchExport">批量导出</el-button>
				</div>
			</div>

			<!-- 异常详情对话框 -->
			<el-dialog
				title="异常详情"
				v-model="detailDialogVisible"
				width="1000px"
				:close-on-click-modal="false">
				<exception-detail v-if="currentException" :exceptionData="currentException" @refresh="loadData"></exception-detail>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="detailDialogVisible = false">关闭</el-button>
					</div>
				</template>
			</el-dialog>

			<!-- 批量处理对话框 -->
			<el-dialog
				title="批量处理异常"
				v-model="batchHandleDialogVisible"
				width="600px">
				<el-form :model="batchHandleForm" :rules="batchHandleFormRules" ref="batchHandleFormRef" label-width="100px">
					<el-form-item label="处理状态" prop="handleStatus">
						<el-radio-group v-model="batchHandleForm.handleStatus">
							<el-radio label="HANDLED">标记为已处理</el-radio>
							<el-radio label="UNHANDLED">标记为未处理</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="处理备注" prop="handleRemark">
						<el-input
							v-model="batchHandleForm.handleRemark"
							type="textarea"
							:rows="4"
							placeholder="请输入处理备注">
						</el-input>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="batchHandleDialogVisible = false">取消</el-button>
						<el-button type="primary" @click="handleConfirmBatchHandle" :loading="batchHandleLoading">确定处理</el-button>
					</div>
				</template>
			</el-dialog>

			<!-- 清理异常对话框 -->
			<el-dialog
				title="清理过期异常"
				v-model="cleanDialogVisible"
				width="400px">
				<el-form :model="cleanForm" :rules="cleanFormRules" ref="cleanFormRef" label-width="100px">
					<el-form-item label="保留天数" prop="days">
						<el-input-number
							v-model="cleanForm.days"
							:min="1"
							:max="365"
							:step="1"
							style="width: 100%">
						</el-input-number>
						<div class="form-tip">将删除{{ cleanForm.days }}天前的所有异常记录</div>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="cleanDialogVisible = false">取消</el-button>
						<el-button type="danger" @click="handleConfirmClean" :loading="cleanLoading">确定清理</el-button>
					</div>
				</template>
			</el-dialog>
		</main>
	</div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
	getExceptionHandlingPage,
	deleteExceptionHandling,
	batchDeleteExceptionHandlings,
	exportExceptionHandlings,
	cleanExpiredExceptions,
	getExceptionHandlingOverview,
	markAsHandled,
	markAsUnhandled,
	batchHandleExceptions
} from '@/api/exceptionHandling'
import ExceptionDetail from '@/components/ExceptionDetail.vue'

export default {
	name: 'ExceptionHandlingIndex',
	components: {
		ExceptionDetail
	},
	setup() {
		// 响应式数据
		const currentUser = ref(null)
		const loading = ref(false)
		const tableData = ref([])
		const selectedExceptions = ref([])

		// 搜索表单
		const searchForm = reactive({
			exceptionType: '',
			exceptionLevel: '',
			handleStatus: '',
			moduleName: '',
			keyword: '',
			timeRange: null
		})

		// 异常类型选项
		const exceptionTypes = ref([
			{ label: '系统异常', value: 'SYSTEM' },
			{ label: '业务异常', value: 'BUSINESS' },
			{ label: '参数异常', value: 'PARAMETER' },
			{ label: '权限异常', value: 'PERMISSION' },
			{ label: '数据库异常', value: 'DATABASE' },
			{ label: '网络异常', value: 'NETWORK' },
			{ label: '文件异常', value: 'FILE' },
			{ label: '其他异常', value: 'OTHER' }
		])

		// 分页信息
		const pagination = reactive({
			currentPage: 1,
			pageSize: 10,
			total: 0
		})

		// 统计概览
		const overview = reactive({
			totalExceptions: 0,
			unhandledExceptions: 0,
			handledExceptions: 0,
			todayExceptions: 0
		})

		// 详情对话框
		const detailDialogVisible = ref(false)
		const currentException = ref(null)

		// 批量处理对话框
		const batchHandleDialogVisible = ref(false)
		const batchHandleLoading = ref(false)
		const batchHandleForm = reactive({
			handleStatus: 'HANDLED',
			handleRemark: ''
		})
		const batchHandleFormRules = {
			handleStatus: [
				{ required: true, message: '请选择处理状态', trigger: 'change' }
			]
		}

		// 清理异常对话框
		const cleanDialogVisible = ref(false)
		const cleanLoading = ref(false)
		const cleanForm = reactive({
			days: 30
		})
		const cleanFormRules = {
			days: [
				{ required: true, message: '请输入保留天数', trigger: 'blur' },
				{ type: 'number', min: 1, max: 365, message: '保留天数必须在1-365之间', trigger: 'blur' }
			]
		}

		// 表单引用
		const batchHandleFormRef = ref(null)
		const cleanFormRef = ref(null)

		// 生命周期钩子
		onMounted(() => {
			// 获取当前用户信息
			currentUser.value = JSON.parse(localStorage.getItem('user')) || {}
			// 加载数据
			loadData()
			// 加载统计概览
			loadOverview()
		})

		// 加载数据
		const loadData = async () => {
			loading.value = true
			try {
				const params = {
					...searchForm,
					currentPage: pagination.currentPage,
					pageSize: pagination.pageSize
				}

				// 处理时间范围
				if (searchForm.timeRange && searchForm.timeRange.length === 2) {
					params.startTime = searchForm.timeRange[0]
					params.endTime = searchForm.timeRange[1]
				}
				delete params.timeRange

				const response = await getExceptionHandlingPage(pagination.currentPage, pagination.pageSize, params)

				if (response.code === 200) {
					tableData.value = response.data.records
					pagination.total = response.data.total
				} else {
					ElMessage.error(response.message || '获取数据失败')
				}
			} catch (error) {
				console.error('获取异常处理数据失败:', error)
				ElMessage.error('获取数据失败')
			} finally {
				loading.value = false
			}
		}

		// 加载统计概览
		const loadOverview = async () => {
			try {
				const response = await getExceptionHandlingOverview()
				if (response.code === 200) {
					Object.assign(overview, response.data)
				}
			} catch (error) {
				console.error('获取统计概览失败:', error)
			}
		}

		// 搜索
		const handleSearch = () => {
			pagination.currentPage = 1
			loadData()
		}

		// 重置搜索
		const handleReset = () => {
			Object.assign(searchForm, {
				exceptionType: '',
				exceptionLevel: '',
				handleStatus: '',
				moduleName: '',
				keyword: '',
				timeRange: null
			})
			handleSearch()
		}

		// 分页大小改变
		const handleSizeChange = (val) => {
			pagination.pageSize = val
			loadData()
		}

		// 当前页改变
		const handleCurrentChange = (val) => {
			pagination.currentPage = val
			loadData()
		}

		// 表格选择改变
		const handleSelectionChange = (selection) => {
			selectedExceptions.value = selection
		}

		// 查看详情
		const handleViewDetail = async (row) => {
			currentException.value = row
			detailDialogVisible.value = true
		}

		// 标记为已处理
		const handleMarkAsHandled = async (row) => {
			try {
				const { value } = await ElMessageBox.prompt('请输入处理备注', '标记为已处理', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputType: 'textarea',
					inputValidator: (value) => {
						if (!value) {
							return '处理备注不能为空'
						}
						return true
					}
				})

				const response = await markAsHandled(row.id, value)
				if (response.code === 200) {
					ElMessage.success('标记成功')
					loadData()
					loadOverview()
				} else {
					ElMessage.error(response.message || '标记失败')
				}
			} catch (error) {
				if (error !== 'cancel') {
					console.error('标记为已处理失败:', error)
					ElMessage.error('标记失败')
				}
			}
		}

		// 标记为未处理
		const handleMarkAsUnhandled = (row) => {
			ElMessageBox.confirm('确定要将该异常标记为未处理吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const response = await markAsUnhandled(row.id)
					if (response.code === 200) {
						ElMessage.success('标记成功')
						loadData()
						loadOverview()
					} else {
						ElMessage.error(response.message || '标记失败')
					}
				} catch (error) {
					console.error('标记为未处理失败:', error)
					ElMessage.error('标记失败')
				}
			})
		}

		// 删除异常
		const handleDelete = (row) => {
			ElMessageBox.confirm('确定要删除该异常记录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const response = await deleteExceptionHandling(row.id)
					if (response.code === 200) {
						ElMessage.success('删除成功')
						loadData()
						loadOverview()
					} else {
						ElMessage.error(response.message || '删除失败')
					}
				} catch (error) {
					console.error('删除异常记录失败:', error)
					ElMessage.error('删除失败')
				}
			})
		}

		// 批量处理
		const handleBatchHandle = () => {
			batchHandleDialogVisible.value = true
		}

		// 确认批量处理
		const handleConfirmBatchHandle = () => {
			batchHandleFormRef.value.validate(async (valid) => {
				if (valid) {
					batchHandleLoading.value = true
					try {
						const exceptionIds = selectedExceptions.value.map(exception => exception.id)
						const response = await batchHandleExceptions(exceptionIds, batchHandleForm)
						if (response.code === 200) {
							ElMessage.success('批量处理成功')
							batchHandleDialogVisible.value = false
							loadData()
							loadOverview()
							selectedExceptions.value = []
						} else {
							ElMessage.error(response.message || '批量处理失败')
						}
					} catch (error) {
						console.error('批量处理失败:', error)
						ElMessage.error('批量处理失败')
					} finally {
						batchHandleLoading.value = false
					}
				}
			})
		}

		// 批量删除
		const handleBatchDelete = () => {
			ElMessageBox.confirm(`确定要删除选中的 ${selectedExceptions.value.length} 条异常记录吗？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const exceptionIds = selectedExceptions.value.map(exception => exception.id)
					const response = await batchDeleteExceptionHandlings(exceptionIds)
					if (response.code === 200) {
						ElMessage.success('批量删除成功')
						loadData()
						loadOverview()
						selectedExceptions.value = []
					} else {
						ElMessage.error(response.message || '批量删除失败')
					}
				} catch (error) {
					console.error('批量删除失败:', error)
					ElMessage.error('批量删除失败')
				}
			})
		}

		// 导出异常
		const handleExport = async () => {
			try {
				const params = { ...searchForm }
				if (searchForm.timeRange && searchForm.timeRange.length === 2) {
					params.startTime = searchForm.timeRange[0]
					params.endTime = searchForm.timeRange[1]
				}
				delete params.timeRange

				const response = await exportExceptionHandlings(params)

				// 创建下载链接
				const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
				const url = window.URL.createObjectURL(blob)
				const link = document.createElement('a')
				link.href = url
				link.download = `异常记录_${new Date().toLocaleDateString('zh-CN')}.xlsx`
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				window.URL.revokeObjectURL(url)

				ElMessage.success('导出成功')
			} catch (error) {
				console.error('导出失败:', error)
				ElMessage.error('导出失败')
			}
		}

		// 批量导出
		const handleBatchExport = async () => {
			try {
				const exceptionIds = selectedExceptions.value.map(exception => exception.id)
				const response = await exportExceptionHandlings({ exceptionIds })

				// 创建下载链接
				const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
				const url = window.URL.createObjectURL(blob)
				const link = document.createElement('a')
				link.href = url
				link.download = `异常记录_${new Date().toLocaleDateString('zh-CN')}.xlsx`
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				window.URL.revokeObjectURL(url)

				ElMessage.success('批量导出成功')
			} catch (error) {
				console.error('批量导出失败:', error)
				ElMessage.error('批量导出失败')
			}
		}

		// 清理异常
		const handleCleanExceptions = () => {
			cleanDialogVisible.value = true
		}

		// 确认清理
		const handleConfirmClean = () => {
			cleanFormRef.value.validate(async (valid) => {
				if (valid) {
					ElMessageBox.confirm(`确定要删除${cleanForm.days}天前的所有异常记录吗？此操作不可恢复！`, '警告', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						cleanLoading.value = true
						try {
							const response = await cleanExpiredExceptions(cleanForm.days)
							if (response.code === 200) {
								ElMessage.success(`成功清理${response.data}条异常记录`)
								cleanDialogVisible.value = false
								loadData()
								loadOverview()
							} else {
								ElMessage.error(response.message || '清理失败')
							}
						} catch (error) {
							console.error('清理异常记录失败:', error)
							ElMessage.error('清理失败')
						} finally {
							cleanLoading.value = false
						}
					})
				}
			})
		}

		// 统计分析
		const handleStatistics = () => {
			window.location.href = '/admin/exception-handlings/statistics'
		}

		// 退出登录
		const handleLogout = () => {
			ElMessageBox.confirm('确定要退出登录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 清除用户信息
				localStorage.removeItem('user')
				localStorage.removeItem('token')
				// 跳转到登录页
				window.location.href = '/login'
			})
		}

		// 获取异常类型标签类型
		const getExceptionTypeTagType = (exceptionType) => {
			const typeMap = {
				'SYSTEM': 'danger',
				'BUSINESS': 'warning',
				'PARAMETER': 'info',
				'PERMISSION': 'warning',
				'DATABASE': 'danger',
				'NETWORK': 'warning',
				'FILE': 'info',
				'OTHER': ''
			}
			return typeMap[exceptionType] || ''
		}

		// 获取异常类型标签
		const getExceptionTypeLabel = (exceptionType) => {
			const type = exceptionTypes.value.find(t => t.value === exceptionType)
			return type ? type.label : exceptionType
		}

		// 获取异常级别标签类型
		const getExceptionLevelTagType = (exceptionLevel) => {
			const levelMap = {
				'LOW': 'info',
				'MEDIUM': 'warning',
				'HIGH': 'danger',
				'CRITICAL': 'danger'
			}
			return levelMap[exceptionLevel] || ''
		}

		// 获取异常级别标签
		const getExceptionLevelLabel = (exceptionLevel) => {
			const levelMap = {
				'LOW': '低',
				'MEDIUM': '中',
				'HIGH': '高',
				'CRITICAL': '严重'
			}
			return levelMap[exceptionLevel] || exceptionLevel
		}

		// 获取处理状态标签类型
		const getHandleStatusTagType = (handleStatus) => {
			const statusMap = {
				'UNHANDLED': 'danger',
				'HANDLING': 'warning',
				'HANDLED': 'success'
			}
			return statusMap[handleStatus] || ''
		}

		// 获取处理状态标签
		const getHandleStatusLabel = (handleStatus) => {
			const statusMap = {
				'UNHANDLED': '未处理',
				'HANDLING': '处理中',
				'HANDLED': '已处理'
			}
			return statusMap[handleStatus] || handleStatus
		}

		// 格式化日期时间
		const formatDateTime = (dateTime) => {
			if (!dateTime) return '-'
			return new Date(dateTime).toLocaleString('zh-CN')
		}

		// 返回所有需要暴露的响应式数据和方法
		return {
			// 响应式数据
			currentUser,
			loading,
			tableData,
			selectedExceptions,
			searchForm,
			exceptionTypes,
			pagination,
			overview,
			detailDialogVisible,
			currentException,
			batchHandleDialogVisible,
			batchHandleLoading,
			batchHandleForm,
			batchHandleFormRules,
			cleanDialogVisible,
			cleanLoading,
			cleanForm,
			cleanFormRules,
			batchHandleFormRef,
			cleanFormRef,

			// 方法
			loadData,
			loadOverview,
			handleSearch,
			handleReset,
			handleSizeChange,
			handleCurrentChange,
			handleSelectionChange,
			handleViewDetail,
			handleMarkAsHandled,
			handleMarkAsUnhandled,
			handleDelete,
			handleBatchHandle,
			handleConfirmBatchHandle,
			handleBatchDelete,
			handleExport,
			handleBatchExport,
			handleCleanExceptions,
			handleConfirmClean,
			handleStatistics,
			handleLogout,
			getExceptionTypeTagType,
			getExceptionTypeLabel,
			getExceptionLevelTagType,
			getExceptionLevelLabel,
			getHandleStatusTagType,
			getHandleStatusLabel,
			formatDateTime
		}
	}
}
</script>

<style scoped>
/* 基础样式 */
* {
	font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	background-color: #f0f2f5;
	color: #1a1a1a;
	margin: 0;
}

/* 容器布局 */
.app-container {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 64px 1fr;
	min-height: 100vh;
	background-color: #F5F7FA;
}

/* 顶部导航栏 */
.header {
	grid-column: 1 / -1;
	background-color: #2C5AA0;
	display: flex;
	align-items: center;
	padding: 0 24px;
}

.logo {
	font-size: 18px;
	font-weight: bold;
	color: white;
	display: flex;
	align-items: center;
	gap: 8px;
}

.flex-grow {
	flex-grow: 1;
}

.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.gap-6 {
	gap: 24px;
}

.gap-2 {
	gap: 8px;
}

/* 左侧导航栏 */
.sidebar {
	background-color: white;
	padding: 16px 0;
	border-right: 1px solid #e4e7ed;
}

.menu-item {
	padding: 12px 24px;
	color: #555;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s;
	cursor: pointer;
}

.menu-item.active,
.menu-item:hover {
	background-color: #e8eff9;
	color: #2C5AA0;
	border-right: 3px solid #2C5AA0;
}

/* 主内容区 */
.content {
	padding: 24px;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 24px;
	overflow-y: auto;
}

.main-content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid #e4e7ed;
}

.header-actions {
	display: flex;
	gap: 12px;
}

/* 统计卡片 */
.statistics-cards {
	margin-bottom: 24px;
}

.stat-card {
	height: 100px;
}

.stat-content {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 16px;
}

.stat-icon {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: white;
}

.stat-icon.success {
	background: linear-gradient(135deg, #67C23A, #85CE61);
}

.stat-icon.primary {
	background: linear-gradient(135deg, #409EFF, #66B1FF);
}

.stat-icon.warning {
	background: linear-gradient(135deg, #E6A23C, #EEBE77);
}

.stat-icon.info {
	background: linear-gradient(135deg, #909399, #A6A9AD);
}

.stat-icon.danger {
	background: linear-gradient(135deg, #F56C6C, #F78989);
}

.stat-info {
	flex: 1;
}

.stat-value {
	font-size: 24px;
	font-weight: bold;
	color: #303133;
	line-height: 1;
}

.stat-label {
	font-size: 14px;
	color: #909399;
	margin-top: 4px;
}

/* 搜索区域 */
.search-bar {
	background: white;
	padding: 24px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid #e4e7ed;
	margin-bottom: 24px;
}

/* 表格容器 */
.table-container {
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid #e4e7ed;
	padding: 24px;
}

/* 分页容器 */
.pagination-container {
	margin-top: 20px;
	text-align: right;
}

/* 批量操作 */
.batch-operations {
	margin-top: 16px;
	padding: 12px;
	background-color: #f5f7fa;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.batch-operations span {
	font-weight: 500;
	color: #606266;
}

/* 头像和退出登录 */
#img-head {
	height: 40px;
	width: 40px;
	border-radius: 50px;
}

.denglu {
	color: white;
	font-size: 15px;
	text-decoration: none;
}

.denglu:hover {
	color: #F44346;
}

.text-sm {
	font-size: 14px;
}

.text-white {
	color: white;
}

/* 表单提示 */
.form-tip {
	font-size: 12px;
	color: #909399;
	margin-top: 4px;
}

/* 图标样式 */
.logo-icon {
	width: 28px;
	height: 28px;
	color: white;
	transition: transform 0.3s ease;
}

.logo:hover .logo-icon {
	transform: rotate(360deg);
}

.logout-icon {
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.logout-icon:hover {
	transform: translateX(2px);
}

.menu-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.3s ease;
}

.menu-item:hover .menu-icon {
	transform: scale(1.1);
}

.btn-icon {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.btn-icon-small {
	width: 14px;
	height: 14px;
	margin-right: 4px;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

:hover .btn-icon,
:hover .btn-icon-small {
	transform: scale(1.1);
}

/* Element UI 样式调整 */
.el-table {
	margin-top: 16px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table th {
	background-color: #fafafa !important;
	color: #606266;
	font-weight: 600;
}

.el-table td {
	padding: 12px 0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
	background-color: #f8f9fa;
}

.el-form-item {
	margin-bottom: 0;
}

.el-card {
	border: none;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.el-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.el-button {
	border-radius: 8px;
	transition: all 0.3s ease;
}

.el-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-select {
	border-radius: 8px;
}

.el-input {
	border-radius: 8px;
}

.el-date-editor {
	border-radius: 8px;
}

.el-tag {
	border-radius: 6px;
	font-weight: 500;
}

.el-dialog {
	border-radius: 12px;
	overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.statistics-cards .el-col {
		margin-bottom: 16px;
	}
}

@media (max-width: 768px) {
	.app-container {
		grid-template-columns: 1fr;
	}

	.sidebar {
		display: none;
	}

	.header {
		padding: 0 16px;
	}

	.content {
		padding: 16px;
	}

	.search-bar .el-form {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.search-bar .el-form-item {
		margin-right: 0;
		margin-bottom: 12px;
	}

	.stat-content {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.stat-icon {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}

	.stat-value {
		font-size: 20px;
	}

	.header-actions {
		flex-direction: column;
		gap: 8px;
	}

	.el-button-group {
		flex-direction: column;
		width: 100%;
	}

	.el-button-group .el-button {
		margin-bottom: 4px;
	}
}
</style>